<template>
  <el-card
    class="w-full h-full"
    shadow="never"
    :body-style="{ height: '100%', padding: '0 var(--el-card-padding)', border: 'none' }"
  >
    <div class="flex h-full">
      <!--左-->
      <div class="flex-[0_0_240px] hidden-xs-only flex pt-3 pb-3">
        <div class="flex-[0_0_100%] w-full">
          <slot name="left"></slot>
        </div>
      </div>
      <!--右-->
      <div class="flex-[0_0_calc(100%-250px)] w-[calc(100%-250px)] pl-5 pt-3 pb-3">
        <div class="flex-[0_0_100%] w-full">
          <slot name="right"></slot>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
defineOptions({
  name: "Card"
});
</script>

<style scoped lang="scss"></style>
